<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>用户注册</title>
		<link rel='stylesheet' type='text/css' href='/static/view/css/common.css'/>
		<link rel='stylesheet' type='text/css' href='/static/view/css/head.css'/>
	</head>
	
	<body>
		<include file="public:header"/>
		<div class='body'>
			<span class='title'>用户注册</span>
			<span style="position:relative;left:1100px;font-size:13px"><a href='login.html'>已有账号？现在登录</a></span>
			<div class='body-infor'>
				<fieldset>
				<legend> 注册必填信息</legend>
                                <form action='/User/user/register' method='post' id="reg-form">
				<table height='200px' border='0px' cellspacing='10px'>
				
					<tr align='right'>
						<th><label for='username'>用户名*</label></th>
						<td><input id='username' class="input" type='text' name='username' autocomplete='off' placeholder='用户名不得小于3个字符' autofocus required/></td>
                                                <td><span id="username_error"></span></td>
                                        </tr>
				 	
				 	<tr align='right'>
					 	<th><label for='password'>密码*</label></th>
					 	<td><input id='password' class="input" type='password' name='password' placeholder='密码至少为3个字符' required/></td>
                                                <td><span id="pwd_error"></span></td>
                                        </tr>
			
				 	<tr align='right'> 
					 	<th><label for='confirm_password'>确认密码*</label></th>
					 	<td><input id='confirm_password' class="input" type='password' placeholder='请再次输入密码' required></td>
                                                <td><span id="confirm_pwd_error"></span></td>
                                        </tr>
					<tr align='right'>
						<th><label for='email'>邮箱*</label></th>
						<td><input id='email' name="email" class="input" type='email' placeholder='注意邮箱格式' required/></td>
                                                <td><span id="email_error"></span></td>
                                        </tr>
                                        <tr align='right'>
                                            <th><label for='verify'>验证码*</label></th>
                                            <td><input class="input" name="verify" id='verify' type='text' placeholder='验证码区分大小写' required/></td>
                                            <td><img id="verifyImg" style="cursor: pointer" src='/User/public/verify/' onclick="fleshVerify()"/></td>
                                        </tr>
					<tr>
					<td></td>
                                        <td><button type='button' id="reg-btn">注册</button><span id="msg"></span></td>
					<td></td>
					</tr>
				</table>
                                </form>
				</fieldset>
				
			</div>
			
		</div>
                <include file="public:footer"/>
	<script type='text/javascript' src='/static/view/js/jquery-1.8.3.js'></script>
	<script type='text/javascript'>
		function fleshVerify(){ 
			 //重载验证码
			 var time = new Date().getTime();//alert(time);
			 document.getElementById('verifyImg').src= '/User/public/verify/'+time;
		}
		$(document).ready(function(){
				var isExist=false;
				$('.title').click(function(){
					$('div.body-infor').slideToggle('slow');
				});
				$('legend').click(function(){
					$(this).next('form').slideToggle('fast');
				});
			   
                                $('#reg-form').keydown(function(e){
                                     if(e.keyCode == 13){
                                         e.preventDefault();//防止回车submit
                                         $('#reg-btn').trigger('click');
                                     }	
                                 });
				//ajax无刷新验证用户名
				$('#username').keyup(function(){
					$.ajax({
						url:"/User/user/findByName",
						data:"username="+$(this).val(),
						dataType:'json',
						type:'post',
						success:function(data){
							if(data.flag=='success'){
								$('#username_error').html("<font color='green'>恭喜，可以注册</font>");
								isExist=false;
							}else{
								$('#username_error').html("<font color='red'>该用户名已被注册</font>");
								isExist=true;
							}
						},
						error:function(){
							alert('an error occured');
						}
					});
				});
				//ajax提交注册信息
				$('#reg-btn').click(function(){
					var username=$.trim($('#username').val());
					var password=$.trim($('#password').val());
					var confirm_password=$.trim($('#confirm_password').val());
					var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
					if(username.length<3){
						$('#username_error').html("<font color='red'>用户名至少为三位</font>");
						return false;
					}
					if(password.length<3){
						$('#password_error').html("<font color='red'>密码至少为三位</font>");
						return false;
					}
					if(confirm_password!=password){
						$('#confirm_pwd_error').html("<font color='red'>两次输入不一致</font>");
						return false;
					}
					if(!reg.test($('#email').val())){
					   $('#email_error').html("<font color='red'>邮箱格式不正确</font>");
					   return false;
					}
					if(isExist==true){
						return false;
					}
					/*向后台提交注册信息*/
					 $.ajax({
						url:'/User/user/register',
						type: 'post',
						cache: false,
						data: $('form#reg-form').serialize(),
						dataType: 'json',
						success:function(o){
							if(o.flag=='success'&&o.msg=='success'){
								$('#msg').html("<font color='green'>注册成功</font>，<a href='/User/user/login'>欢迎登陆</a>");
							}else if(o.flag=='false'){
								$('#msg').html("<font color='red'>验证码输入错误</a>");
							}else{
								$('#msg').html("<font color='red'>注册失败</a>");
							}
						},
						error:function(){
							alert('an error accured');
						}
					}); 
				});
			  
                        
		});
	
	</script>
	</body>
</html>